import uCharts from '../ucharts/u-charts.js';
var _self;
var canvaColumn = null;
var canvaPie = null;
Page({
  data: {
    cWidth: '',
    cHeight: '',
    columnChartData: {
      "categories": ["单选题", "多选题", "判断题"],
      "series": [{
      "name": "答题情况",
      "data": [60,20,20]
      }]
    },
    pieChartData: {
      "series": [{
      "name": "正确率",
      "data": 80
      }, {
      "name": "错误率",
      "data": 20
      }]
    }
  },
  onLoad: function () {
    _self=this;
    this.cWidth = wx.getSystemInfoSync().windowWidth;
    this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    _self.showColumn("canvasColumn", this.data.columnChartData);

    _self.showPie("canvasPie", this.data.pieChartData)
  },

  showColumn(canvasId, chartData) {
    canvaColumn = new uCharts({
      $this: _self,
      canvasId: canvasId,
      type: 'column',
      legend: true,
      fontSize: 11,
      background: '#FFFFFF',
      pixelRatio: 1,
      animation: true,
      categories: chartData.categories,
      series: chartData.series,
      xAxis: {
        disableGrid: true,
      },
      yAxis: {
        //disabled:true
      },
      dataLabel: true,
      width: _self.cWidth ,
      height: _self.cHeight ,
      extra: {
        column: {
          type: 'group',
          width: _self.cWidth * 0.45 / chartData.categories.length
        }
      }
    });

  },
  touchColumn(e) {
    canvaColumn.showToolTip(e, {
      format: function (item, category) {
        if (typeof item.data === 'object') {
          return category + ' ' + item.name + ':' + item.data.value
        } else {
          return category + ' ' + item.name + ':' + item.data
        }
      }
    });
  },
  showPie(canvasId,chartData){
    canvaPie=new uCharts({
      $this:_self,
      canvasId: canvasId,
      type: 'pie',
      fontSize:11,
      legend:{show:true},
      background:'#FFFFFF',
      series: chartData.series,
      animation: true,
      width: _self.cWidth ,
      height: _self.cHeight ,
      dataLabel: true,
      extra: {
        pie: {
          lableWidth:15
        }
      },
    });
  },
  touchLineA(e) {
    canvaLineA.scrollStart(e);
  },
  moveLineA(e) {
    canvaLineA.scroll(e);
  },
  touchEndLineA(e) {
    canvaLineA.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaLineA.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
  touchCandle(e) {
    canvaCandle.scrollStart(e);
  },
  moveCandle(e) {
    canvaCandle.scroll(e);
  },
  touchEndCandle(e) {
    canvaCandle.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaCandle.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
})
